<template>
  <div id="evolution" style="width: 1600px; height: 700px"></div>
</template>

<script>
import debounce from "lodash.debounce"
export default {
  name: "DemonBeastEvolution",
  data(){
    return {
      demonBeastName:[],
      demonBeastRandNum:[],
      seriesList:[],
      inverterMonTimer: null,//设置定时刷新，五分钟一次
      loading: false,
    }
  },
  methods:{
    drawEvolutionChart(num,name) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("evolution"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        dataZoom:[  // 有滚动条 平移
          {
            type: 'slider',
            realtime: true,
            start: 0,
            end: 40,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)",
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',

            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          },
          {
            type: "inside",  // 支持内部鼠标滚动平移
            start: 0,
            end: 40,
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
          }
        ],
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          //type: 'value'
          type: 'category',
          data: this.demonBeastName,
          axisLabel:{
            interval:0
          }
        },
        yAxis: {

        },
        series: this.seriesList
      };
     ;
      myChart.setOption(option);
      //设置五分钟一次的定时刷新
      this.$nextTick(() =>{
        this.inverterMonTimer = setInterval(() =>{
          this.demonBeastEvolution("","");
        },10000);
      });
    },
    demonBeastEvolution:debounce(
        function () {
          //判断定时刷新是否存在，存在先清除
          if (this.inverterMonTimer) {
            clearInterval(this.inverterMonTimer);
            this.inverterMonTimer = null;
          }
          this.$getRequest("/system/demon_beast/evolution").then(resp=>{
            if(resp){
              console.log(JSON.stringify(resp));
              this.demonBeastName = resp["obj"].demon_beast_name;
              this.demonBeastRandNum = resp["obj"].demon_beast_rank;
              this.seriesList = [];
              for (let i = 0; i < this.demonBeastRandNum.length; i++) {
                this.seriesList.push({
                  name: this.demonBeastRandNum[i]["demon_beast_rank"],
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: this.demonBeastRandNum[i]["num"]
                });
              }
              this.drawEvolutionChart(this.demonBeastName,this.seriesList);
            }
          }).catch((error) =>{
            console.log(error);
            this.loading = false;
            return false;
          });
          this.loading = true;
        },200,{ leading: true,trailing: false }),
  },
  mounted(){
    this.demonBeastEvolution("","");
  },
  activated() {
    if (this.inverterMonTimer) {
      clearInterval(this.inverterMonTimer);
      this.inverterMonTimer = null;
    }
    this.demonBeastEvolution("","");
  },
  deactivated() {
    if (this.inverterMonTimer){
      clearInterval(this.inverterMonTimer);
      this.inverterMonTimer = null;
    }
  },
  beforeDestroy() {
    if (this.inverterMonTimer) {
      clearInterval(this.inverterMonTimer);
      this.inverterMonTimer = null;
    }
  },
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>